<script setup lang="ts" name="LuckyGrid2">
import button from '@/assets/lottery/luckyGrid/luckyGrid2/button.png'
import img01 from '@/assets/lottery/luckyGrid/luckyGrid2/1.png'
import img02 from '@/assets/lottery/luckyGrid/luckyGrid2/2.png'
import img03 from '@/assets/lottery/luckyGrid/luckyGrid2/3.png'
import img04 from '@/assets/lottery/luckyGrid/luckyGrid2/4.png'
import img05 from '@/assets/lottery/luckyGrid/luckyGrid2/5.png'
import img06 from '@/assets/lottery/luckyGrid/luckyGrid2/6.png'
import img07 from '@/assets/lottery/luckyGrid/luckyGrid2/7.png'
import img08 from '@/assets/lottery/luckyGrid/luckyGrid2/8.png'
import img09 from '@/assets/lottery/luckyGrid/luckyGrid2/9.png'
import img10 from '@/assets/lottery/luckyGrid/luckyGrid2/10.png'
import img11 from '@/assets/lottery/luckyGrid/luckyGrid2/11.png'
import img12 from '@/assets/lottery/luckyGrid/luckyGrid2/12.png'
import { lottery } from '@/api/lottery'
const luckyGridRef = ref(null)

const initInfo = ref({
  blocks: [
    { padding: '0' }
  ],
  prizes: [
    { x: 0, y: 0, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img01, top: '10%', width: '80%', height: '80%' }] },
    { x: 1, y: 0, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img02, top: '10%', width: '80%', height: '80%' }] },
    { x: 2, y: 0, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img03, top: '10%', width: '80%', height: '80%' }] },
    { x: 3, y: 0, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img04, top: '10%', width: '80%', height: '80%' }] },
    { x: 3, y: 1, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img05, top: '10%', width: '80%', height: '80%' }] },
    { x: 3, y: 2, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img06, top: '10%', width: '80%', height: '80%' }] },
    { x: 3, y: 3, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img07, top: '10%', width: '80%', height: '80%' }] },
    { x: 2, y: 3, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img08, top: '10%', width: '80%', height: '80%' }] },
    { x: 1, y: 3, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img09, top: '10%', width: '80%', height: '80%' }] },
    { x: 0, y: 3, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img10, top: '10%', width: '80%', height: '80%' }] },
    { x: 0, y: 2, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img11, top: '10%', width: '80%', height: '80%' }] },
    { x: 0, y: 1, borderRadius: 10, shadow: '0px 5px 0px #ffbfbf', imgs: [{ src: img12, top: '10%', width: '80%', height: '80%' }] }
  ],
  buttons: [
    { x: 1, y: 1, col: 2, row: 2, borderRadius: 10, background: 'rgba(255,255,255,0)', shadow: '', imgs: [{ src: button, top: 0, width: '100%', height: '100%' }] }
  ],
  defaultConfig: {
    gutter: 10
  },
  defaultStyle: {
    background: '#feeeee'
  },
  activeStyle: {
    background: '#fec670',
    shadow: '0px 5px 0px #e58e01'
  }
})

// 点击抽奖按钮会触发star回调
const startCallback = () => {
  // 调用抽奖组件的play方法开始游戏
  luckyGridRef.value.play()
  // 模拟调用接口异步抽奖
  lottery.result({ count: initInfo.value.prizes.length - 1, column: 1 }, { config: { showLoading: false, mockEnable: true } }).then((res: any) => {
    if (res && res.code === 200) {
      // 调用stop停止旋转并传递中奖索引
      luckyGridRef.value.stop(res.data.index)
    }
  })
}

// 抽奖结束会触发end回调
const endCallback = (prize) => {
  console.log(prize, '抽奖结果回调')
}
</script>

<template>
  <el-card shadow="hover">
    <template #header>
      <div class="card-header">
        <span>九宫格-十二宫格</span>
      </div>
    </template>
    <div class="lucky-grid-pane">
      <div class="lucky-grid-content">
        <LuckyGrid
          ref="luckyGridRef"
          width="15.625vw"
          height="15.625vw"
          rows="4"
          cols="4"
          :defaultConfig="initInfo.defaultConfig"
          :defaultStyle="initInfo.defaultStyle"
          :activeStyle="initInfo.activeStyle"
          :prizes="initInfo.prizes"
          :buttons="initInfo.buttons"
          @start="startCallback"
          @end="endCallback"></LuckyGrid>
      </div>
    </div>
  </el-card>
</template>

<style scoped lang="scss">
.el-card {
  :deep(.el-card__body) {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2dd8f2;
    background-image: url('@/assets/lottery/bg.svg');
    background-attachment: fixed;
  }
}

.lucky-grid-pane {
  width: 19.225vw;
  margin: 0 auto;
  padding: 1.3vw;
  overflow: hidden;
  background-color: #fe4236;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
  animation: changeBg 0.5s ease infinite;

  .lucky-grid-content {
    width: 100%;
    padding: 0.5vw;
    overflow: hidden;
    background-color: #d80017;
    border-radius: 5px;
  }
}

@keyframes changeBg {
  0% {
    background-image: url("@/assets/lottery/luckyGrid/luckyGrid2/bg1.png");
  }

  100% {
    background-image: url("@/assets/lottery/luckyGrid/luckyGrid2/bg2.png");
  }
}
</style>
